<template>
  <div class="custom-el-home-main custom-el-main">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card
          shadow="hover"
          class="el-card-title mgb20"
          v-loading="empinfoloading"
        >
          <div class="user-info">
            <img :src="photo" class="user-avator" alt />
            <div class="user-info-cont">
              <div class="user-info-name">{{ employeeInfo.empName }}</div>
              <div>
                {{
                  $t("i18n.home_current_emp_ennname") + employeeInfo.empEnName
                }}
              </div>
              <div>
                {{ $t("i18n.home_current_emp_empcode") + employeeInfo.empCode }}
              </div>
              <div>
                {{
                  $t("i18n.home_current_emp_emptype") +
                    (employeeInfo.isAdmin
                      ? $t("i18n.home_current_emp_epmtypeadmin")
                      : $t("i18n.home_current_emp_epmtypeuser"))
                }}
              </div>
            </div>
          </div>
          <div class="user-info-list">
            {{ $t("i18n.home_current_emp_posname") }}
            <span>{{ employeeInfo.positionName }}</span>
          </div>
          <div class="user-info-list">
            {{ $t("i18n.home_current_emp_orgname") }}
            <span>{{ employeeInfo.orgName }}</span>
          </div>
          <div class="user-info-list">
            {{ $t("i18n.home_current_emp_companyname") }}
            <span>{{ employeeInfo.tenementName }}</span>
          </div>
        </el-card>
        <el-card
          shadow="hover"
          class="el-card-title"
          v-loading="workbenchloading"
        >
          <template #header>
            <div class="card-title-header">
              <span class="el-field-area-title-text">
                <i class="el-icon-guide"></i>
                {{ $t("i18n.home_flow_workbench") }}
              </span>
              <el-button
                class="el-field-title-close"
                @click="morelink"
                size="mini"
                type="text"
              >
                {{ $t("i18n.path_flow_center") }}
                <i class="el-icon-d-arrow-right"></i>
              </el-button>
              <el-tooltip
                placement="right-start"
                effect="light"
                :content="$t('i18n.co_set')"
              >
                <el-button
                  class="el-field-title-close"
                  icon="el-icon-setting"
                  @click="addBench()"
                  size="mini"
                  type="text"
                ></el-button>
              </el-tooltip>
            </div>
          </template>
          <el-container>
            <el-main class="flow-workbench-icon-main">
              <el-scrollbar>
                <div
                  v-for="(item, index) in flowBenchs"
                  :key="index"
                  class="flow-workbench-icon-div"
                >
                  <el-tooltip placement="right-start" effect="light">
                    <template #content>
                      <el-tag
                        effect="dark"
                        size="mini"
                        style="margin-left: 5px; margin-top: 5px;"
                      >
                        {{ $t("flowi18n.flow_property_name") }}：
                        {{ item.cnName }}
                      </el-tag>
                      <br />
                      <el-tag
                        effect="dark"
                        size="mini"
                        style="margin-left: 5px; margin-top: 5px;"
                      >
                        {{ $t("flowi18n.flow_property_flowenname") }}：
                        {{ item.enName }}
                      </el-tag>
                      <br />
                      <el-tag
                        effect="dark"
                        size="mini"
                        style="margin-left: 5px; margin-top: 5px;"
                      >
                        {{ $t("flowi18n.flow_step_property_placeholder") }}：
                        {{ item.placeholder }}
                      </el-tag>
                    </template>
                    <el-button
                      type="primary"
                      :style="{
                        background: item.flowStyle,
                        'border-color': item.flowStyle,
                      }"
                      @click="processEvent(item)"
                    >
                      <svg class="flow-workbench-icon" aria-hidden="true">
                        <use :xlink:href="item.flowIcon" />
                      </svg>
                      <div class="flow-workbench-icon-checked-text">
                        {{
                          $i18n.locale === "zh-cn" ? item.cnName : item.enName
                        }}
                      </div>
                    </el-button>
                  </el-tooltip>
                </div>
              </el-scrollbar>
            </el-main>
          </el-container>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-row :gutter="20" class="mgb20">
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <i class="el-icon-user-solid grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">1234</div>
                  <div>用户访问量</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-2">
                <i class="el-icon-message-solid grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">321</div>
                  <div>系统消息</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-3">
                <i class="el-icon-s-goods grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">5000</div>
                  <div>数量</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-card
          shadow="hover"
          class="el-card-title mgb20"
          style="position: relative"
        >
          <el-tabs
            v-model="activeName"
            class="demo-tabs demo-tabs-height"
            @tab-click="InitTable(null)"
          >
            <el-tab-pane name="todo">
              <template #label>
                <div>
                  <span class="font_16px">
                    <i class="el-icon-lx-file"></i>
                    {{ $t("i18n.flow_workbench_todo") }}
                  </span>
                </div>
              </template>
              <div>
                <el-scrollbar class="flow-todolist-scrollbar">
                  <div :style="autoHeight">
                    <table-componets-vue
                      ref="table1"
                      :isShowButton="false"
                      :loading="tableLoading"
                      :tables="tables"
                      :isOpertions="1 == 0"
                      @hyperLinekEvent="hyperLinekEvent"
                    ></table-componets-vue></div
                ></el-scrollbar>
              </div>
            </el-tab-pane>
            <el-tab-pane name="circulated">
              <template #label>
                <div>
                  <span class="font_16px">
                    <i class="el-icon-lx-notice"></i>
                    {{ $t("i18n.flow_workbench_read") }}
                  </span>
                </div>
              </template>
              <div>
                <el-scrollbar class="flow-todolist-scrollbar">
                  <div :style="autoHeight">
                    <table-componets-vue
                      ref="table1"
                      :isShowButton="false"
                      :tables="tables"
                      :isOpertions="1 == 0"
                      @hyperLinekEvent="hyperLinekEvent"
                    ></table-componets-vue></div
                ></el-scrollbar>
              </div>
            </el-tab-pane>
            <el-tab-pane name="apply">
              <template #label>
                <div>
                  <span class="font_16px">
                    <i class="el-icon-lx-addressbook"></i>
                    {{ $t("i18n.flow_workbench_apply") }}
                  </span>
                </div>
              </template>
              <div>
                <el-scrollbar class="flow-todolist-scrollbar">
                  <div :style="autoHeight">
                    <table-componets-vue
                      ref="table1"
                      :isShowButton="false"
                      :tables="tables"
                      :isOpertions="1 == 0"
                      @hyperLinekEvent="hyperLinekEvent"
                    ></table-componets-vue></div
                ></el-scrollbar>
              </div>
            </el-tab-pane>
          </el-tabs>
          <div style="position: absolute;right:30px;top:20px;">
            <el-button
              class="el-field-title-close"
              @click="morelink"
              size="mini"
              type="text"
            >
              {{ $t("i18n.path_flow_center") }}
              <i class="el-icon-d-arrow-right"></i>
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="hover">
          <schart
            ref="bar"
            class="schart"
            canvasId="bar"
            :options="options"
          ></schart>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <schart
            ref="line"
            class="schart"
            canvasId="line"
            :options="options2"
          ></schart>
        </el-card>
      </el-col>
    </el-row>
    <el-drawer
      :append-to-body="true"
      :withHeader="false"
      v-model="showdrawer"
      direction="rtl"
      size="29.5%"
    >
      <FlowWorkBenchComponetVue
        ref="flowbenchs"
        v-if="showdrawer"
        @ConfirmEvent="benchConfirmEvent"
      ></FlowWorkBenchComponetVue>
    </el-drawer>
  </div>
</template>

<script>
import Schart from "vue-schart";
import confVue from "../../utils/conf.vue";
import reqVue from "../../utils/req.vue";
import FlowWorkBenchComponetVue from "../../components/Global/FlowWorkBenchComponet.vue";
import TableComponetsVue from "../../components/TableComponets.vue";

export default {
  name: "home",
  data() {
    return {
      name: localStorage.getItem("ms_username"),
      data: [
        {
          name: "2018/09/04",
          value: 1083,
        },
        {
          name: "2018/09/05",
          value: 941,
        },
        {
          name: "2018/09/06",
          value: 1139,
        },
        {
          name: "2018/09/07",
          value: 816,
        },
        {
          name: "2018/09/08",
          value: 327,
        },
        {
          name: "2018/09/09",
          value: 228,
        },
        {
          name: "2018/09/10",
          value: 1065,
        },
      ],
      options: {
        type: "bar",
        title: {
          text: "最近一周各品类销售图",
        },
        xRorate: 25,
        labels: ["周一", "周二", "周三", "周四", "周五"],
        datasets: [
          {
            label: "家电",
            data: [234, 278, 270, 190, 230],
          },
          {
            label: "百货",
            data: [164, 178, 190, 135, 160],
          },
          {
            label: "食品",
            data: [144, 198, 150, 235, 120],
          },
        ],
      },
      options2: {
        type: "line",
        title: {
          text: "最近几个月各品类销售趋势图",
        },
        labels: ["6月", "7月", "8月", "9月", "10月"],
        datasets: [
          {
            label: "家电",
            data: [234, 278, 270, 190, 230],
          },
          {
            label: "百货",
            data: [164, 178, 150, 135, 160],
          },
          {
            label: "食品",
            data: [74, 118, 200, 235, 90],
          },
        ],
      },
      photo: require("../../assets/img/img.jpeg"),
      employeeInfo: {},
      activeName: "todo",
      empinfoloading: true,
      workbenchloading: false,
      flowBenchs: [],
      showdrawer: false,
      flowTaskLoading: true,
      autoHeight: {},
      outHeight: {
        height: "",
      },
      tables: {},
      sizes: confVue.$size,
      layout: confVue.$layout,
      query: {
        page: 0,
        pageSize: 10,
      },
      tableLoading: false,
    };
  },
  components: {
    Schart,
    FlowWorkBenchComponetVue,
    TableComponetsVue,
  },
  computed: {
    role() {
      return this.employeeInfo.isAdmin === "admin" ? "超级管理员" : "普通用户";
    },
  },
  methods: {
    changeDate() {
      const now = new Date().getTime();
      this.data.forEach((item, index) => {
        const date = new Date(now - (6 - index) * 86400000);
        item.name = `${date.getFullYear()}/${date.getMonth() +
          1}/${date.getDate()}`;
      });
    },
    initWorkBench() {
      reqVue.$Post(null, "workbench/v1.0").then(
        function(data) {
          if (data.status) {
            if (data.body !== "") this.flowBenchs = data.body;
            this.workbenchloading = false;
          } else {
            this.$message.error(data.message);
            this.workbenchloading = false;
          }
        }.bind(this)
      );
    },
    ///添加工作台
    addBench() {
      this.showdrawer = true;
    },
    morelink() {
      this.$router.push({
        path: "/flowcenter",
      });
    },
    benchConfirmEvent() {
      this.showdrawer = false;
      this.workbenchloading = true;
      this.initWorkBench();
    },
    initData() {
      let request = [
        {
          url: "doc/file/v1.0/photo/0",
          model: null,
        },
        {
          url: "business/emp/v1.0/currentuser",
          model: null,
        },
        {
          url: "business/workbench/v1.0",
          model: null,
        },
      ];
      reqVue.$All(request).then(
        function(res) {
          ///头像
          if (res[0].data.status) {
            if (res[0].data.body !== "") this.photo = res[0].data.body;
            this.empinfoloading = false;
          } else {
            this.$message.error(res[0].data.message);
            this.empinfoloading = false;
          }
          ///员工信息
          if (res[1].data.status) {
            if (res[1].data.body !== "") this.employeeInfo = res[1].data.body;
            this.empinfoloading = false;
          } else {
            this.$message.error(res[1].data.message);
            this.empinfoloading = false;
          }
          ////工作台
          if (res[2].data.status) {
            if (res[2].data.body !== "") this.flowBenchs = res[2].data.body;
            this.workbenchloading = false;
          } else {
            this.$message.error(res[2].data.message);
            this.workbenchloading = false;
          }
          this.InitTable(null);
        }.bind(this)
      );
    },
    InitTable(queryModel) {
      this.tableLoading = true;
      if (queryModel != undefined && queryModel != null) {
        this.query = queryModel;
      } else {
        this.query.page = 1;
        this.query.pageSize = 10;
      }
      this.query.checkPermission = true;
      this.query.paramters = [];
      this.query.paramters.push({ label: "tasktype", value: this.activeName });
      reqVue.$Post(this.query, "flowcenter/v1.0/hpages", "flow").then(
        function(data) {
          if (data.status) {
            this.tables = data.body;
            this.total = data.total;
            this.tableLoading = false;
          } else {
            this.$message.error(data.message);
          }
        }.bind(this)
      );
    },
    PageChange(queyModel) {
      this.InitTable(queyModel);
    },
    ///跳转到流程页面
    processEvent(procee) {
      this.$router.push({
        path: "/process",
        query: {
          flowId: procee.flowId,
          flowVersionId: procee.flowVersionId,
          formId: procee.formId,
          formVersionId: procee.formVersionId,
          taskId: 0,
          callType: "mayapply",
          approvalType: 0,
        },
      });
    },
    hyperLinekEvent(para) {
      ///标题的链接
      if (para.row.key == "title") {
        this.$router.push({
          path: "/process",
          query: {
            flowId: para.data.flowId,
            flowVersionId: para.data.flowVersionId,
            formId: para.data.formId,
            formVersionId: para.data.formVersionId,
            taskId: para.data.taskId,
            callType: this.activeName,
            approvalType: para.data.processType,
          },
        });
      }
    },
  },
  mounted() {
    this.initData();
  },
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 105px;
  height: 105px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 26px;
  color: rgb(92, 90, 90);
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}
.mgt20 {
  margin-top: 20px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

.schart {
  width: 100%;
  height: 300px;
}
.demo-tabs-height {
  height: 430px;
}
.flow-todolist-scrollbar {
  height: 380px;
}
</style>
